﻿html, body, div, h1, ul ,li, span, p, input, button
{
    margin: 0;
    padding: 0;
}

.linear-gradient(@from-color, @from-pos, @to-color, @to-pos)
{
    background: @from-color; /* Old browsers */
    background: -moz-linear-gradient(top,  @from-color @from-pos, @to-color @to-pos); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@from-pos,@from-color), color-stop(@to-pos,@to-color)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos); /* IE10+ */
    background: linear-gradient(to bottom,  @from-color @from-pos,@to-color @to-pos); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{from-color}', endColorstr='@{to-color}',GradientType=0 ); /* IE6-9 */
}

.clearfix
{
    zoom: 1;

    &:after
    {
        content: "";
        height: 0;
        clear: both;
        display: block;
    }
}

body
{
    div#wrapper
    {
        width: 960px;
        margin: 30px 30px;
        font-family: Cambria, 'Times New Roman', 'Nimbus Roman No9 L', 'Freeserif', Times, serif;
        font-size: 16px;
        color: #555555;

        > div
        {
            display: inline-block;
            border: 1px solid black;
            border-radius: 15px;
            padding: 5px 15px;
            .linear-gradient(#EEEEEE, 0%, #AAAAAA, 100%);

            h1
            {
                font-size: 1.8em;
                padding: 10px 6px 10px 7px;
            }

            > ul
            {
                list-style-type: none;
                .clearfix;

                > li
                {
                    border: 1px solid black;
                    border-radius: 15px;
                    padding: 5px 15px;
                    clear: both;
                    margin-bottom: 5px;
                    width: 200px;

                    > span
                    {
                        display: block;
                        &:first-of-type
                        {
                            font-weight: bold;
                            font-size: 1.1em;
                        }

                        &:last-of-type
                        {
                            font-family: Consolas;
                            font-size: 0.8em;
                        }
                    }
                }


                li.me-item
                {
                    float: right;
                    .linear-gradient(#29EDFF, 0%, #C0FAFF, 100%);

                    > span
                    {
                        &:first-of-type
                        {
                            text-align: left;
                        }

                        &:last-of-type
                        {
                            text-align: right;
                        }
                    }
                }

                li.toshko-item
                {
                    float: left;
                    .linear-gradient(#DFFFD2, 0%, #6FFF3B, 100%);

                    > span
                    {
                        &:first-of-type
                        {
                            text-align: right;
                        }

                        &:last-of-type
                        {
                            text-align: left;
                        }
                    }
                }
            }

            > input
            {
                clear: both;
                margin: 2px 0px;
                width: 245px;
                border-radius: 5px;
                border: 0;
                background-color: #EEEEEE;
                padding-bottom: 10px;
                padding-top: 9px;
                padding-left: 15px;
                padding-right: 15px;
                color: #555555;
            }

            > button
            {
                border: 0;
                width: 69px;
                height: 31px;
                border-radius: 5px;
                font-size: 1.1em;
                position: relative;
                top: 1px;
                .linear-gradient(#EDEDED, 0%, #ADADAD, 100%);

                &:hover
                {
                    background: #EEEEEE;
                }
            }
        }
    }
}



